<template>
  <a-button type="primary" :icon="h(PlusSquareOutlined)" @click="handleNew" />
  <a-list item-layout="horizontal" :data-source="source" class="container">
    <template #renderItem="{ item }">
      <a-list-item>
        <a-card :title="item.title">
          <a-button
            danger
            shape="circle"
            :icon="h(DeleteOutlined)"
            @click="handleClick(item.id)"
          />
          <a-button
            danger
            shape="circle"
            :icon="h(FormOutlined)"
            @click="handleEditClick(item.id)"
          />
        </a-card>
      </a-list-item>
    </template>
  </a-list>
</template>
<script lang="ts" setup>
import { defineProps, h, defineEmits } from "vue";
import {
  DeleteOutlined,
  FormOutlined,
  PlusSquareOutlined,
} from "@ant-design/icons-vue";
import type { NoteInfo } from "@/models";

const props = defineProps<{
  source: Array<NoteInfo>;
}>();

const emits = defineEmits(["onRemove", "onNoteClick", "onNew"]);

const handleClick = (id) => {
  emits("onRemove", { id });
};

const handleEditClick = (id) => {
  emits("onNoteClick", { id });
};

const handleNew = () => {
  emits("onNew");
};
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  width: 300px;
}
</style>
